<div class="container operate">
  <i nz-icon nzType="profile" nzTheme="outline" class="card-title"></i>
  <span class="card-title">数据列表</span>
  <button nz-button style="float: right;" nzSize="small" (click)="handleAdd()"> 添加 </button>
</div>

<div class="table-container">
  <nz-table #productCateTable [nzData]="productCateList" [nzBordered]="true" [nzShowPagination]="false" [nzLoading]="tabelLoding" nzSize="small" >
    <thead>
      <tr>
        <th nzAlign="center" nzWidth="6%">编号</th>
        <th nzAlign="center">分类名称</th>
        <th nzAlign="center" nzWidth="6%">级别</th>
        <th nzAlign="center" nzWidth="6%">商品数量</th>
        <th nzAlign="center" nzWidth="6%">数量单位</th>
        <th nzAlign="center" nzWidth="6%">导航栏</th>
        <th nzAlign="center" nzWidth="6%">是否显示</th>
        <th nzAlign="center" nzWidth="6%">排序</th>
        <th nzAlign="center" nzWidth="13%">设置</th>
        <th nzAlign="center" nzWidth="12%">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of productCateTable.data">
        <td nzAlign="center">{{data.id}}</td>
        <td nzAlign="center">{{data.name}}</td>
        <td nzAlign="center">{{data.level | productCateLevel}}</td>
        <td nzAlign="center">{{data.productCount}}</td>
        <td nzAlign="center">{{data.productUnit}}</td>
        <td nzAlign="center">
          <nz-switch [(ngModel)]="data.navStatus" [nzControl]="true" (click)="handleNavStatusClick(data.id)" [nzLoading]="navStatusLoading.get(data.id)"></nz-switch>
        </td>
        <td nzAlign="center">
          <nz-switch [(ngModel)]="data.showStatus" [nzControl]="true" (click)="handleShowStatusClick(data.id)" [nzLoading]="showStatusLoading.get(data.id)"></nz-switch>
        </td>
        <td nzAlign="center">{{data.sort}}</td>
        <td nzAlign="center">
          <button nz-button nzSize="small" class="operateButton" (click)="handleNavDown(data.id)" [disabled]="data.level != 0">查看下级</button>
          <button nz-button nzSize="small" class="operateButton" (click)="handleMoveCate(data.id)">转移商品</button>
        </td>
        <td nzAlign="center">
          <button nz-button nzSize="small" class="operateButton" (click)="handleUpdate(data.id)">编辑</button>
          <button nz-button nzSize="small" class="operateButton" (click)="handleDelete(data.id)" nzDanger nzType="primary">删除</button>
        </td>
       </tr>
    </tbody>
  </nz-table>
</div>

<div class="pagination-container">
  <nz-pagination [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" [(nzTotal)]="total" [nzPageSizeOptions]="[5, 10, 20]" nzShowQuickJumper nzShowSizeChanger
    [nzShowTotal]="totalTemplate" (nzPageIndexChange)="handlePageIndexChange()" (nzPageSizeChange)="handlePageSizeChange()"></nz-pagination>
  <ng-template #totalTemplate let-total>共{{total}}条</ng-template>
</div>
